<template>
  <common-pop class-name="rule-pop" :size="isPc?'normal':'large'" :show-close="showClose"
       :close-on-click-mask="closeOnClickMask" @close="close">
    <view class="rule-box">
      <view class="title rule-title">活动规则</view>
      <view class="rule-body">
        <scroll-view class="rule-scroll-box" scroll-y>
          <view class="rule-content scroll-box">
            <p>规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案</p>
            <p>规则文案测试文案规则文案测试文案规则文案测试文案规规则文案测试文案则文案测试文案</p>
            <p>规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案</p>
            <p>规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案</p>
            <p>规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案</p>
            <p>规则文案测试文案规则文案测试文案规则文案测试文案规规则文案测试文案则文案测试文案</p>
            <p>规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案</p>
            <p>规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案</p>
            <p>规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案</p>
            <p>规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案</p>
            <p>规则文案测试文案规则文案测试文案规则文案测试文案规规则文案测试文案则文案测试文案</p>
            <p>规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案</p>
            <p>规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案规则文案测试文案</p>
          </view>
        </scroll-view>
      </view>
    </view>
  </common-pop>
</template>
<script>
import CommonPop from '../common-pop.vue'

export default {
  name: 'Rule',
  components: {
    CommonPop
  },
  data () {
    return {
      showClose: true,
      closeOnClickMask: true,
      prizeList: [],
      scrollBar: null
    }
  },
  mounted () {
  },
  methods: {
    close () {
      this.$closePop('rule')
    },
    initScroll () {
      this.$nextTick(() => {
        this.scrollBar = $('.scroll-box').niceScroll({
          cursorcolor: '#B3FF0F',
          background: '#424242',
          cursorwidth: '5px',
          cursorborder: 'none',
          cursorborderradius: '0px',
          railpadding: { top: 0, right: 0, left: 0, bottom: 0 },
          cursoropacitymin: 0,
          horizrailenabled: false,
          autohidemode: false
        })
        // console.log(this.scrollBar, 'this.scrollBar')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.rule-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  height: 100%;
  box-sizing: border-box;
}

.rule-title {
  text-align: center;
  width: 100%;
  font-size: 32rpx;
}

.rule-body {
  margin-top: 20rpx;
  height: 0;
  flex: 1;
}

.rule-scroll-box {
  height: 100%;
}
</style>
